<template>
  <div>
    <gather></gather>
    <a-row
      style="margin-top: 20px"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <a-col :span="6">
        <a-card
          title="近7天医废种类占比统计"
          :bordered="false"
        >
          <medicalWasteTypes ref="medicalWasteTypes"></medicalWasteTypes>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card
          title="各月医废回收趋势"
          :bordered="false"
        >
          <recoveryTrend ref="recoveryTrend"></recoveryTrend>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card
          title="预警预览"
          :bordered="false"
        >
          <a-row
            type="flex"
            justify="space-between"
          >
            <a-col :span="7">
              <div class="icon-1">
                <div class="img1 mt25">
                  <img
                    src="../../assets/icon01.png"
                    alt=""
                  />
                </div>
                <div class="title fz16 pt15">
                  近七天<br />
                  预警总数
                </div>
                <div class="num fz28 pt27 ff">
                  {{ warnBaseSituation.seven }}
                </div>
              </div>
            </a-col>
            <a-col :span="7">
              <div class="icon-2">
                <div class="img1 mt25">
                  <img
                    src="../../assets/icon02.png"
                    alt=""
                  />
                </div>
                <div class="title fz16 pt32">正在预警</div>
                <div class="num fz28 pt27 ff">
                  {{ warnBaseSituation.now }}
                </div>
              </div>
            </a-col>
            <a-col :span="7">
              <div class="icon-3">
                <div class="img1 mt25">
                  <img
                    src="../../assets/icon03.png"
                    alt=""
                  />
                </div>
                <div class="title fz16 pt32">已处理</div>
                <div class="num fz28 pt27 ff">
                  {{ warnBaseSituation.done }}
                </div>
              </div>
            </a-col>
          </a-row>
          <!-- <warningPreview ref="warningPreview"></warningPreview> -->
          <!-- <warningInfo ref="warningInfo"></warningInfo> -->
          <!-- <applicationRecord ref="applicationRecord"></applicationRecord> -->
        </a-card>
      </a-col>
    </a-row>
    <a-row
      style="margin-top: 20px"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <a-col :span="12">
        <a-card
          title="实时医废收集情况"
          :bordered="false"
        >
          <template #extra>
            <span
              v-if="userInfo1.type != 'admin'"
              @click="handleGoTo('/medicalWaste/retrospect')"
              class="s-tar flex-1 fz14 s-pointer"
              style="display:block;color:#A8A8A8"
            >更多 <right-outlined /></span>
          </template>
          <realTimeMedicalWaste ref="realTimeMedicalWaste"></realTimeMedicalWaste>
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card
          title="预警信息"
          :bordered="false"
        >
          <template #extra>
            <span
              v-if="userInfo1.type != 'admin'"
              @click="handleGoTo('/alarmInfo/alarmRecord')"
              class="s-tar flex-1 fz14 s-pointer"
              style="display:block;color:#A8A8A8"
            >更多 <right-outlined /></span>
          </template>
          <warningInfo ref="warningInfo"></warningInfo>
        </a-card>
      </a-col>
    </a-row>
    <a-row
      style="margin-top: 20px"
      type="flex"
      justify="space-between"
    >
      <a-col :span="userInfo1.type=='admin'?14:24">
        <a-card
          title="科室产生医废前15排行"
          :bordered="false"
        >
          <a-month-picker
            @change="chooseTime"
            v-model:value="monthRange"
            :format="monthFormat"
            valueFormat="YYYY/MM"
          />
          <fifteenDepart ref="fifteenDepart"></fifteenDepart>
        </a-card>
      </a-col>
      <a-col
        :span="9"
        v-if="userInfo1.type=='admin'"
      >
        <a-card
          title="医院申请记录"
          :bordered="false"
        >
          <template #extra>
            <div
              @click="handleGoTo1('/hospitalInstitutions/application')"
              class="s-tar flex-1 fz14 s-pointer"
              style="display:block;color:#A8A8A8"
              href="#"
            > 更多 <right-outlined /></div>
          </template>
          <record ref="record"></record>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import gather from "./components/gather";
import medicalWasteTypes from "./components/medicalWasteTypes";
import recoveryTrend from "./components/recoveryTrend";
// import warningPreview from './components/warningPreview'
import warningInfo from "./components/warningInfo";
// import applicationRecord from './components/applicationRecord'
import realTimeMedicalWaste from "./components/realTimeMedicalWaste";
import fifteenDepart from "./components/fifteenDepart";
import record from "./components/record";
import * as statisticsApi from "@/api/statistics";
import { getUserInfo, setUserInfo } from "@/utils/auth";
import * as Utils from "@/utils";
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
const monthFormat = "YYYY/MM";
export default {
  components: {
    gather,
    medicalWasteTypes,
    recoveryTrend,
    // warningPreview,
    warningInfo,
    // applicationRecord,
    realTimeMedicalWaste,
    fifteenDepart,
    record,
  },
  setup() {
    const router = useRouter();
    const userInfo1 = reactive(getUserInfo() ? JSON.parse(getUserInfo()) : {});
    console.log("userInfo1", userInfo1.type);
    const warnBaseSituation = ref({});
    const fifteenDepart = ref("");
    const monthRange = ref("");
    const handleInitWarnBaseSituation = () => {
      statisticsApi.warnBaseSituation().then((res) => {
        if (res && res.success) {
          warnBaseSituation.value = res.data;
        }
      });
    };
    const chooseTime = () => {
      let params = {
        month: monthRange.value
          ? monthRange.value.split("/")[1]
          : Utils.parseTime(new Date(), "{m}"),
        year: monthRange.value
          ? monthRange.value.split("/")[0]
          : Utils.parseTime(new Date(), "{y}"),
      };
      fifteenDepart.value.handleInit(params);
    };
    onMounted(() => {
      handleInitWarnBaseSituation();
      chooseTime();
    });
    const handleGoTo1 = (_row) => {
      router.push({
        path: _row,
      });
    };
    const handleGoTo = (_row) => {
      if (userInfo1.type == "admin") {
        return;
      }

      router.push({
        path: _row,
      });
    };
    return {
      userInfo1,
      handleInitWarnBaseSituation,
      warnBaseSituation,
      chooseTime,
      handleGoTo1,
      handleGoTo,
      fifteenDepart,
      monthFormat,
      monthRange,
    };
  },
};
</script>
<style lang="scss" scoped>
.icon-1 {
  background: url("../../assets/bg01.png") no-repeat center center;
  background-size: 100%;
  height: 270px;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  .img1 {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.icon-2 {
  background: url("../../assets/bg02.png") no-repeat center center;
  background-size: 100%;
  height: 270px;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  .img1 {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.icon-3 {
  background: url("../../assets/bg03.png") no-repeat center center;
  background-size: 100%;
  height: 270px;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  .img1 {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>